{% extends "base_site.html" %}
{% block extrahead %}{{ block.super }}
<script type='text/javascript' src='/site_media/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript' src='/site_media/js/simple_textareas.js'></script>
<script type='text/javascript' src='/site_media/js/jquery.form.js'></script>
<script type='text/javascript'>
	// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        //target:        '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
		dataType:  	   'json',
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
        // $.ajax options can be used here too, for example: 
        timeout:   3000 
    }; 

	 $.ajaxSetup({
	   error: handleError
	 });
    // bind form using 'ajaxForm' 
    $('#commentForm').ajaxForm(options);
	// 绑定form-pre-serialize事件，在触发form-serilaize事件前保存tinyMCE的数据到textarea中
	$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
	    tinyMCE.triggerSave();
	});
	
	// bind delete links click events
	var bind_a_delete = function(e) {
		result = window.confirm('真的要删除吗?');
		if(result) {
			$.getJSON($(this).attr('href'), null, function(result) {
				alert(result.message);
				if(result.success) {
					$('#commentForm').resetForm();
					$('#commentList').html(result.comment_list);
					$('#commentList a.delete').click(bind_a_delete);
				}
			});
		}
		return false;
	}
	$('#commentList a.delete').click(bind_a_delete);
});

function handleError(request, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  //this; // the options for this ajax request
	alert('textStatus: '+textStatus + ', errorThrown: ' + request.responseText);
}
 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    //var queryString = $.param(formData); 
 	$('ul.errorlist').remove();
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
    //alert('About to submit: \n\n' + queryString); 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 
 
// post-submit callback 
function showResponse(result, statusText)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
	if(result.success) {
		alert(result.message);
		$('#commentForm').resetForm();
		$('#commentList').html(result.comment_list);
	} else {
		for (var i in result.errors) {
			$('#'+i).after(result.errors[i]);
		}
	}
}

</script>
{% endblock %}
{% block content %}
<div class='entry'>
	<a name="post{{ post.id }}"></a>
	<h2><a href='{{ post.get_absolute_url }}' title='{{ post.title|title }}'  
			alt='{{ post.title }}'>{{ post.title|title }} </a></h2>
	<p>{{ post.content|safe }}</p>
	<p class="post-footer align-right">
		{% if post.can_edit %}
		<a href="{{ post.edit_url }}" class="edit">Edit</a>
		{% endif %}
	    <a href="{{ post.get_absolute_url }}" class="readmore">Read ({{ post.hits }})</a>
	    <a href="{{ post.get_absolute_url }}#comments" class="comments">Comments ({{ post.comment_count }})</a>
	    <span class="date">{{ post.create_date|date:"P l, M d, Y" }}</span>
	</p>
</div>
<h3>Comments</h3>
<a name='comments'></a>
<div id='commentList'>
	{% include 'posts/comment_list_template.html' %}
</div>
<form id='commentForm' action="{{ post.get_absolute_url }}comment/add/" method="POST">
    <p>
        <label for='{{comment_form.title.auto_id}}'>
            {{comment_form.title.label}}
        </label>
		{{comment_form.title}}
        <label for='{{comment_form.username.auto_id}}'>
            {{comment_form.username.label}}
        </label>
        {{comment_form.username}}
        <label for='{{comment_form.useremail.auto_id}}'>
            {{comment_form.useremail.label}}
        </label>
        {{comment_form.useremail}}
		<label for='{{comment_form.usersite.auto_id}}'>
            {{comment_form.usersite.label}}
        </label>
        {{comment_form.usersite}}
		<label for='{{comment_form.content.auto_id}}'>
            {{comment_form.content.label}}
        </label>
        {{comment_form.content}}
        <br/>
        <input class="button" type="submit" value='发言' />
		<br/>
    </p>
</form>
<div id='output'></div>
{% endblock %}